<template>
	<view>
		<view class="usernameBox">
			<view class="usernameBox_text">
				<text>完善个人信息</text>
				<p @click="goWechat">跳过</p>
			</view>
			<view class="name">
				<text>头像</text>
				<view class="name_box">
					<!-- -->
					<text @click="checkHead" v-show="file==''">请选择</text>
					<image :src="file" @click="showeaa" />
					<image src="http://106.14.56.171:15016/images/login/u253.png" />
				</view>
			</view>

			<view class="company">
				<text>Email</text>
				<view class="company_box">
					<input placeholder-style="color:#adadad;font-size:33rpx;" v-model="email" placeholder="请输入"
						type="text" @blur="emailBlur" maxlength="20" />
					<img src="http://106.14.56.171:15016/images/login/u253.png" />
				</view>
			</view>
			<view class="company" @click="clickGender">
				<view>
					<text>性别</text>
				</view>
				<view class="company_box">
					<text style="padding-right: 5%;" v-if="sex != ''">{{ sex == 1 ?"男":sex == 2 ?"女":"" }}</text>
					<text v-else style="color:#adadad;padding-right: 5%;">请选择</text>
					<image class="list_personal_icon" src="http://106.14.56.171:15016/images/login/u253.png" mode="">
					</image>
				</view>
			</view>

			<view class="cell">
				<text>生日</text>
				<view class="cell_box">
					<uni-datetime-picker type="date" v-model="birthday" :end="timeEnd">
						<text style="padding-right: 5%;width: 100%;" v-if="birthday != ''">{{ birthday }}</text>
						<text v-else
							style="margin-right: 19rpx; color:#adadad;width: 100%; font-size: 33rpx;">填写生日有惊喜</text>
					</uni-datetime-picker>
					<img src="http://106.14.56.171:15016/images/login/u253.png" />
				</view>
			</view>
		</view>

		<view class="login" @click="gonext">
			<view><text>下一步</text></view>
		</view>
		<!-- 底部弹窗性别-->
		<uni-popup ref="popupGender" type="bottom">
			<view class="sexOne">
				<radio-group name="sex" @change="radioChange">
					<label>
						<view class="sexMan" style="border-bottom: 1px solid #DDDDDF;">
							<view>
								<radio value="1" :checked="sex === 1" />
								<text>男</text>
							</view>
						</view>
						<!-- 默认选中 -->
						<view class="sexMan" style="border-radius: 0 0 19rpx 19rpx ;">
							<view>
								<radio value="2" :checked="sex === 2" /><text>女</text>
							</view>
						</view>

						<view class="cancelSex" @click="cancelSex">
							<text>取消</text>
						</view>
					</label>
				</radio-group>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				androidIos: '',
				type: true, //点击显示注册显示的头像“请选择”
				cancelGender: true, //点击显示性别
				userID: '', //注册用户ID
				email: '', //注册邮箱
				sex: '', //注册性别
				birthDay: '', //注册生日
				userName: '', //注册用户名
				file: '', //修改头像
				headUrl: '',
				birthday: '',
				headPortrait: '', //头像
				timeEnd: '' //禁止当前日期之后的选择

			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.timeEnd = this.formatDateTime(new Date());
			this.androidIos = getApp().globalData.androidIos;
		},
		onShow() {
			console.log(this.userInfo.head);
			let routes = getCurrentPages();
			let param = routes[routes.length - 1].options;
			console.log(param);
			this.userName = param.userName
			// this.userHead=this.userInfo
			this.onSurer()
		},
		methods: {
			...mapMutations(['setUserInfo']), // 重要
			// 点击显示选择男女
			onSurer() {
				this.$httpNew.post('authApi/auth/GetUserInfo', {
					appId: this.androidIos
				}).then(res => {
					this.file = res.head + '?time=' + new Date().getTime() || '';
					console.log(this.file, '136sedrrrdadsdsds');
				})
			},
			clickGender() {
				this.$refs.popupGender.open('bottom')
			},
			cancelSex() {
				this.$refs.popupGender.close('bottom')
			},
			// 点击选项性别时,渲染到页面上
			radioChange(e) {
				this.sex = e.detail.value;
				this.$refs.popupGender.close('bottom')
			},

			checkHead() {
				this.$httpNew
					.urlImgUpload(
						'authApi/user/updateUserHead', {
							count: 1,
							file: this.file,
						}, {
							onEachUpdate: res => {
								console.log('单张上传成功返回1：', res);
							},
							onProgressUpdate: res => {
								console.log('上传进度返回2：', res);
							}
						},
					)
					.then(res => {
						console.log('resregw', this.file);
						if (res == null) {
							this.file = res + "?time=" + new Date().getTime()
							this.onSurer()
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
						}
					});
			},
			showeaa() {
				this.$httpNew
					.urlImgUpload(
						'authApi/user/updateUserHead', {
							count: 1,
							file: this.file
						}, {
							onEachUpdate: res => {
								console.log('单张上传成功返回3：', res);
							},
							onProgressUpdate: res => {
								console.log('上传进度返回4：', res);
							}
						}
					)
					.then(res => {
						console.log(190, res);
						if (res == null) {
							this.file = res + "?time=" + new Date().getTime()
							this.onSurer()
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
						}

					}).catch(errCatch => {
						console.log('218errCatcherrCatcherrCatch', errCatch);
					});
			},
			// email输入框失去焦点时判断
			emailBlur() {
				let emailMace = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if (this.email == '') {

				} else if (!emailMace.test(this.email)) {
					uni.showToast({
						title: '请输入正确邮箱',
						icon: 'none'
					});
					this.email = '';
				}
			},
			// 点击下一步,调接口(注册的接口)跳转到绑定微信页面
			gonext() {
				if (this.sex == '' && this.birthday == '' && this.email == '' && this.file == '') {
					uni.showToast({
						title: '请填写信息',
						icon: 'none'
					});
					return
				}
				let data = {
					appId: this.androidIos,
					name: this.userName,
					sex: this.sex || null, //注册性别
					birthDate: this.birthday == "" ? null : this.birthday.trim(), //注册生日
					email: this.email, //注册邮箱
				};
				this.$httpNew.post('authApi/user/updateUser', data).then(res => {
					console.log('修改用户信息res225', res);
					if (res == null) {
						this.setUserInfo(res); //重复
						// 修改成功后清空输入的内容
						this.email = '';
						this.sex = '';
						this.birthday = '';
						this.file = '';
						// 跳转到绑定微信页面
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						});
						uni.navigateTo({
							url: './binding'
						});
					}
				});
			},
			// 点击"跳过"跳转到绑定微信界面
			goWechat() {
				uni.navigateTo({
					url: './binding'
				});
			},
			formatDateTime(date) {
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				return y + '-' + m + '-' + d
			},
		}
	};
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
	}

	.name,
	.cell,
	.company {
		border-bottom: 1rpx solid #e0e0e0;
		height: 110rpx;
		display: flex;

		align-items: center;
		color: #6a6a6a;
		font-size: 34rpx;
		padding: 0px 10rpx;

		>text {
			width: 30%;
		}

		>view {
			width: 70%;
		}
	}

	// 性别的右箭头图标
	.list_personal_icon {
		// margin-left: 5%;
		width: 35rpx;
		height: 35rpx;
	}

	// 性别
	.sexOne {
		height: 280rpx;

	}

	.sexMan {
		width: 95%;
		height: 80rpx;
		margin: auto;
		// height: 100rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: #EDEDEF;
		border-radius: 19rpx 19rpx 0 0;

	}

	.cancelSex {
		position: relative;
		top: 30rpx;
		width: 95%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: auto;
		border-radius: 19rpx;
		background-color: #ffffff;
	}

	.name {
		border-top: 1rpx solid #e0e0e0;
	}

	.usernameBox {
		padding: 0 40rpx;
	}

	.usernameBox text {
		color: #000;
		display: block;
	}

	.usernameBox_text {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>text {
			font-weight: 500;
			font-size: 50rpx;
			line-height: 250rpx;
		}
	}

	.company_box,
	.name_box,
	.cell_box {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: flex-end;
		// background-color: aquamarine;
	}



	.name_box>text {
		position: relative;
		left: 86rpx;
		color: #adadad;
	}

	.company_box input {
		text-align: right;
		margin-right: 3%;
		width: 100%;

		>text {
			font-size: 26rpx;
		}
	}

	.cell_box img,
	.company_box img {
		width: 30rpx;
		height: 30rpx;
	}

	// 注册头像的大小尺寸
	.name_box {
		>image:nth-child(2) {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}

		>image:nth-child(3) {
			width: 40rpx;
			height: 40rpx;
		}

	}

	.login {
		margin-top: 110rpx;
		width: 100%;
		height: 140rpx;
		padding: 0 40rpx;
		text-align: center;

		>view {
			line-height: 90rpx;
			color: #fff;
			font-size: 36rpx;
			margin-bottom: 50rpx;
			width: 90%;
			height: 90rpx;
			background-color: #b5001e;
			border-radius: 50rpx;
		}
	}
</style>
